/**
 * Created by Dalyn on 2017/3/1.
 */
/*导入模块*/
import React,{Component} from 'react';
import {Link} from "react-router";
// import "./Tab_title.css";
/*默认导出组件*/
export default class Left extends React.Component {
    constructor(props){
        super(props);
        this.arr=[];
        this.state={
            selected:true
        }
    }

    componentWillMount(){

        this.arr=[
            {style:Style.item1,link:"/homepage",text:"首页",
                i_img:{display:"inline-block", width:"20px", height:"20px", background:"url('./img/main_sp.png') no-repeat -80px -20px", verticalAlign:"-5px"}
            },
            {style:Style.item,link:"/companymanage",text:"企业管理",
                i_img:{display:"inline-block", width:"20px", height:"20px", background:"url('./img/main_sp.png') no-repeat 0 -40px", verticalAlign:"-5px"}
            },
            {style:Style.item,link:"/usermanage",text:"用户管理",
                i_img:{display:"inline-block", width:"20px", height:"20px", background:"url('./img/main_sp.png') no-repeat -20px -40px", verticalAlign:"-5px"}
            },
            {style:Style.item,link:"/indentmanage",text:"订单管理",
                i_img:{display:"inline-block", width:"20px", height:"20px", background:"url('./img/main_sp.png') no-repeat -80px -40px", verticalAlign:"-5px"}
            },
            {style:Style.item,link:"/productmanage",text:"产品管理",
                i_img:{display:"inline-block", width:"20px", height:"20px", background:"url('./img/main_sp.png') no-repeat -20px -20px", verticalAlign:"-5px"}
            },
            // {style:Style.item,link:"/productImported",text:"已导入产品",
            //     i_img:{display:"inline-block", width:"20px", height:"20px", background:"url('./img/main_sp.png') no-repeat -20px -20px", verticalAlign:"-5px"}
            // },
            // {style:Style.item,link:"/productNotImported",text:"未导入产品",
            //     i_img:{display:"inline-block", width:"20px", height:"20px", background:"url('./img/main_sp.png') no-repeat -20px -20px", verticalAlign:"-5px"}
            // },
            // {style:Style.item,link:"/examinemanage",text:"审批管理",
            //     i_img:{display:"inline-block", width:"20px", height:"20px", background:"url('./img/main_sp.png') no-repeat -40px -20px", verticalAlign:"-5px"}
            // },
            {style:Style.item,link:"/rechargesettlement",text:"账户充值",
                i_img:{display:"inline-block", width:"20px", height:"20px", background:"url('./img/main_sp.png') no-repeat -60px -20px", verticalAlign:"-5px"}
            },
            {style:Style.item,link:"/settlementcenter",text:"企业结算",
                i_img:{display:"inline-block", width:"20px", height:"20px", background:"url('./img/main_sp.png') no-repeat -60px -20px", verticalAlign:"-5px"}
            },
            {style:Style.item,link:"/loanfinance",text:"贷款记录",
                i_img:{display:"inline-block", width:"20px", height:"20px", background:"url('./img/main_sp.png') no-repeat -60px -20px", verticalAlign:"-5px"}
            },
            // {style:Style.item,link:"/backstaffmanage",text:"后台人员管理",
            //     i_img:{display:"inline-block", width:"20px", height:"20px", background:"url('./img/main_sp.png') no-repeat -60px -20px", verticalAlign:"-5px"}
            // },
            // {style:Style.item,link:"/backlimitmanage",text:"后台权限设置",
            //     i_img:{display:"inline-block", width:"20px", height:"20px", background:"url('./img/main_sp.png') no-repeat -60px -20px", verticalAlign:"-5px"}
            // },
            {style:Style.item,link:"/settingmanage",text:"系统设置",
                i_img:{display:"inline-block", width:"20px", height:"20px", background:"url('./img/main_sp.png') no-repeat -60px -20px", verticalAlign:"-5px"}
            },
            {style:Style.item,link:"/managerlist",text:"人员管理",
                i_img:{display:"inline-block", width:"20px", height:"20px", background:"url('./img/main_sp.png') no-repeat -60px -20px", verticalAlign:"-5px"}
            },
            {style:Style.item,link:"/rolemanage",text:"角色管理",
                i_img:{display:"inline-block", width:"20px", height:"20px", background:"url('./img/main_sp.png') no-repeat -60px -20px", verticalAlign:"-5px"}
            },
            {style:Style.item,link:"/tickling",text:"反馈处理",
                i_img:{display:"inline-block", width:"20px", height:"20px", background:"url('./img/main_sp.png') no-repeat -60px -20px", verticalAlign:"-5px"}
            },

        ];
    }
    addItem(){
        return this.arr.map((item,index) => {
            if(index===0){
                return (
                    <div style={Style.item1} key={index+"_"}>
                        <Link to={"/homepage"}>
                            <b className="selected"></b>
                            <i style={item.i_img}></i>
                            <span style={Style.span}>首页</span>
                        </Link>
                    </div>
                )
            }else{
                return (
                    <div style={item.style} key={index+"_"}>
                        <Link to={item.link}>
                            <b></b>
                            <i style={item.i_img}></i>
                            <span style={Style.span}>{item.text}</span>
                        </Link>
                    </div>
                )
            }
        })
    }
    render() {
        return (
            <div style={Style.left}  className="tab_box">
                <div style={Style.logoBox}>
                    <img style={Style.logo} src="./img/main_logo.png" alt="衣有道"/>
                </div>
                {
                    this.addItem()
                }
            </div>
        )
    }
}
let Style={
    left:{
        width: '166px',
        height:"900px",
        background:"#666666",
        position:"absolute",
        top:"0",
        left:"0"
    },
    logoBox:{
        width:"117px",
        height:"34px",
        margin:"0 auto",
        padding:"15px 0 0",
    },
    logo:{
        width:"100%",
        height:"100%"
    },
    item:{
        width: '100%',
        height: '36px',
        textAlign: 'center',
        lineHeight: '36px',
        marginTop:"20px",
        position:"relative"
    },
    span:{
        fontSize:"16px",
        color:"#fff",
        paddingLeft:"18px"
    },
    item1:{
        width: '100%',
        height: '40px',
        textAlign: 'left',
        lineHeight: '40px',
        margin:"20px 0",
        paddingLeft:"32px",
        position:"relative"
    },
    i_img:{
        display:"inline-block",
        width:"20px",
        height:"20px",
        background:"url('./img/main_sp.png') no-repeat -20px -20px",
        verticalAlign:"-5px"
    },
};